<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13canvas移动</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">滤镜</button>
<br>
<br>

</body>

<script>


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height


    const generateGround = () => {

        ctx.beginPath();
        //位移100,100,位移需要在绘制图形之前做,开始是基于原点变化
        // ctx.translate(100, 100);
        // ctx.translate(100, 0);
        // //旋转，绕左上角
        // ctx.rotate(deg2Arc(45))
        // //缩放
        // ctx.scale(1.5, 1.5);

        //使用transform方法将上述效果集中
        //https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/transform 看文档写
        //倾斜和旋转有点区别,先transform再旋转时记得和css一样最后旋转
        ctx.transform(1.5,0,0,1.5,200,100)
        // //旋转，绕左上角
        ctx.rotate(deg2Arc(45))
        ctx.fillRect(0, 0, 100, 100);
        ctx.closePath();
    }

    const button = document.getElementById('bt');
    button.addEventListener('click', generateGround);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>